<template>


    <view class="briefing">
          <view class="status_bar">
                <!-- 这里是状态栏 -->
            </view>
            <view class="bgTop ">
                <view class="uni-list leftNav  ">
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-db">
                                    123
                        </view>
                    </view>
                </view>
            </view>
        <view class="time-txt">数据时间：{{ tiemTxt }}</view>
        <row :arr="overView"></row>
        <view class="day-type flex-box">

            <view class="day-nav flex-box">
                <picker @change="bindPickerStartDay" :value="time.start" mode="date">
                    <view class="flex-box">
                        <view class="icon calender"></view>
                        <text class="fx1">{{ time.start }}</text>
                    </view>
                </picker>
                <text>至</text>
                <picker @change="bindPickerEndDay" :value="time.end" mode="date">
                    <view class="flex-box items">
                        <text class="fx1">{{ time.end }}</text>
                    </view>
                </picker>
            </view>

            <view class="type-nav flex-box items">
                <view class="item" v-for="(item, index) in tableType.t" :key="index" @tap="changeType(index)" :class="{ act: index == tableType.current }">
                    <text>{{ item.des }}</text>
                </view>
            </view>
        </view>
        <!-- 最近  lately -->
        <view class="lately">
            <view class="lately-nav flex-box">
                <view class="item" v-for="(item, index) in lately.txtArr" :key="index" @tap="changeTime(index)" :class="{ act: index == lately.current }">
                    <text>{{ item }}</text>
                </view>
            </view>
        </view>

        <view class="t">

            <!-- 柱状图 -->
            <view v-show="tableType.current === 1">
                <view class="qiun-columns">
                    <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
                    </view>
                    <view class="qiun-charts">
                        <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
                    </view>
                </view>
            </view>

            <!-- 表格 -->
            <view v-show="tableType.current === 0">
                <view class="table-box">
                    <view class="table-tt">
                        <view class="tr flex-box row-3">
                            <view class="td r">时间</view>
                            <view class="td r">平均能耗</view>
                            <view class="td r">能耗</view>
                            <view class="td">产能</view>
                            <view class="td">进车数</view>
                        </view>
                    </view>
                    <view class="table-body row-3">
                        <view class="tr flex-box" v-for="(item, index) in table" :key="index">
                            <view class="td r" v-show="changTips">{{ item.created_at }}</view>
                            <view class="td" v-show="changTips">{{ item.data_value }}</view>
                            <view class="td" v-show="changTips">{{ item.status }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Row from "../../comon/C/row4.vue";
import uCharts from "../../comon/js/u-charts.min.js";
import {
    request
} from "../../comon/js/request.js"
var _self;
var canvaLineA = null;
export default {
    data() {
        return {
            changTips: true,
            //柱状图
            cWidth: "rpx",
            cHeight: "rpx",
            pixelRatio: 1,
            serverData: "",
            series: [{
                name: "",
                data: "",
                color: ""
            }],

            tiemTxt: "2019-07-10 00:00:00",
            time: {
                start: "2019-05-10",
                end: "2019-07-25"
            },
            tableType: {
                current: 0,
                t: [{
                        des: "列表",
                        isAct: true
                    },
                    {
                        des: "图表",
                        isAct: false
                    }
                ]
            },
            overView: [{
                    number: 1000,
                    des: "平均能耗"
                },
                {
                    number: 10,
                    des: "产能"
                },
                {
                    number: 1010,
                    des: "能耗"
                },
                {
                    number: 5,
                    des: "进车数"
                }
            ],
            lately: {
                current: 0,
                txtArr: ["最近七天", "最近十五天", "最近三十天"],
                week: {}
            },
            table: []
        };
    },
    methods: {
        //筛选
        saixuanDate(num) {
            let table2 = this.table[num].created_at
            let table3 = this.time.start
            let table4 = this.time.end
            let arrar = table2.split(" ")[0].split('-')
            let arrar2 = table3.split('-')
            let arrar3 = table4.split('-')

            // if (arrar[0] < arrar2[0] && arrar[0] > arrar3[0]) {
            //     if (arrar[1] < arrar2[1] && arrar[1] > arrar3[1]) {
            //         console.log(arrar[2],arrar2[2],arrar3[2],11111111111111)
            //         if (arrar[2] < arrar2[2] && arrar[2] > arrar3[2]) {
            //             console.log(22222222222222222222)
            //             return this.changTips = false
            //         } else {
            //             return this.changTips = true
            //         }
            //     } else {
            //         return this.changTips = true
            //     }
            // } else {
            //     return this.changTips = true
            // }
            if (arrar[0] < arrar2[0] || arrar[0] > arrar3[0]) {
                console.log(111111111111111)
                return this.changTips = false
            } else {
                if (arrar[1] < arrar2[1] || arrar[1] > arrar3[1]||arrar2[1]==arrar3[1]) {
                    if (arrar[2] < arrar2[2] || arrar[2] > arrar3[2]) {
                        return this.changTips = false
                    } else {
                        return this.changTips = true
                    }
                } else {
                    return this.changTips = true
                    
                }
            }

        },

        getEnergy() {

            request({
                url: `v1/data/statistics/?equipment_id=1`,
                method: "GET"
            }).then(res => {
                console.log(res)
                this.overView[0].number = res.data.result.yield
                this.overView[1].number = res.data.result.yield
                this.overView[2].number = res.data.result.consumption
                this.overView[3].number = res.data.result.card_num
            })
        },
        //获取事件/属性值/最近三十天
        getTime() {
            request({
                url: `v1/data/list?page=1&equipment_id=1&register_id=1`,
                method: "GET"
            }).then(res => {
                console.log(res)
                this.table = res.data.result.list.data
                console.log(this.table, "2222222222222222")
                // 
                for (let i = 0; i < this.table.length; i++) {
                    this.saixuanDate(i)
                }
            })
        },
        bindPickerStartDay(e) {
            console.log(e);
            this.time.start = e.detail.value
        },
        bindPickerEndDay(e) {
            this.time.end = e.detail.value
            for (let i = 0; i < this.table.length; i++) {
                this.saixuanDate(i)
            }
        },
        changeType(index) {
            this.tableType.current = index;
        },
        changeTime(index) {
            this.lately.current = index;
            // this.saixuanDate()
        },
        getServerData() {
            uni.request({
                url: "https://www.ucharts.cn/data.json",
                data: {},
                success: function (res) {
                    console.log(res.data.data);
                    //下面这个根据需要保存后台数据，我是为了模拟更新柱状图，所以存下来了
                    _self.serverData = res.data.data;
                    let Column = {
                        //x轴年份
                        categories: ["05-28", "05-29", "05-30", "05-31", "06-01", "06-02", "06-03"],
                        //模拟返回的两条柱状图,是个数组
                        series: [{
                            name: "平均能耗",
                            color: "#0062a1",
                            data: [0, 0, 0, 0, 0, 0, 0],
                            //返回的图像类型
                            type: "column"
                        }]
                    };
                    //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
                    // Column.categories = res.data.data.Column.categories;
                    // Column.series = res.data.data.Column.series;
                    _self.showColumn("canvasColumn", Column);
                    console.log(Column.categories)
                    console.log(Column.series)
                },
                fail: () => {
                    _self.tips = "网络错误，小程序端请检查合法域名";
                }
            });
        },
        showColumn(canvasId, chartData) {
            var canvaColumn = new uCharts({
                $this: _self,
                canvasId: canvasId,
                type: "column",
                legend: {
                    show: true
                },
                fontSize: 11,
                background: "#FFFFFF",
                pixelRatio: _self.pixelRatio,
                animation: true,
                categories: chartData.categories,
                series: chartData.series,
                xAxis: {
                    disableGrid: true
                },
                yAxis: {
                    //disabled:true
                    max: 1,
                    min: -1
                },
                dataLabel: true,
                width: _self.cWidth * _self.pixelRatio,
                height: _self.cHeight * _self.pixelRatio,
                extra: {
                    column: {
                        type: "group",
                        width: (_self.cWidth * _self.pixelRatio * 0.45) /
                            chartData.categories.length
                    }
                }
            });
        },
        touchColumn(e) {
            canvaColumn.showToolTip(e, {
                format: function (item, category) {
                    if (typeof item.data === "object") {
                        return (
                            category + " " + item.name + ":" + item.data.value
                        );
                    } else {
                        return category + " " + item.name + ":" + item.data;
                    }
                }
            });
        },
        //获取全部数据的平均能耗

    },
    onLoad(options) {

        //假设传过来equipment_id=1
        // let equipment_id = options.id
        let equipment_id = 1
        _self = this;
        this.cWidth = uni.upx2px(750);
        this.cHeight = uni.upx2px(500);
        this.getServerData();
        this.getEnergy();
        this.getTime()
    },

    components: {
        Row
    },

};
</script>

<style lang="scss">
.status_bar {
    height: var(--status-bar-height);
    width: 100%;
    background: #0c69a4;
}
.bgTop {
    background: #0c69a4;
    height: 80rpx;

    .leftNav {
        // margin-top: 60rpx;
        margin-left: -30rpx;
        width: 250rpx;
        height: 50rpx;
        // border: 1rpx solid pink;
        display: flex;
        justify-content: center;
        font-size: 26rpx;

        .leftNav-text {
            display: flex;
            justify-content: center;
            text-align: center;
            align-content: center;
            line-height: 50rpx;
            color: white;
        }

        img {
            position: relative;
            top: -45rpx;
            left: 135rpx;
            width: 40rpx;
            height: 40rpx;
        }
    }
}
.briefing {
    background: #ffffff;

    .t {
        view {
            .pillar {
                margin: 0 auto;
                width: 664rpx;
                height: 660rpx;
                border: 1rpx solid #e5ecf3;
            }
        }
    }

}

$bg: #f0f4f8;

.day-type {
    padding: 0 $spacing-center;

    .day-nav {
        background: $bg;
        width: 65%;
        height: 55rpx;
        padding-top: 10rpx;
        padding-left: 15rpx;
        border-radius: 5rpx;
        box-sizing: border-box;
        border: 1rpx solid $border-grey;

        text {
            margin: 0 $spacing-s;
        }
    }

    .type-nav {
        margin-left: 5%;
        width: 30%;
        background: $bg;
        border-radius: 5rpx;

        .item {
            box-sizing: border-box;
            padding-top: 5rpx;
            flex: 1;
            text-align: center;
            height: 55rpx;
        }

        .act {
            background: $color-theme-blue;
            color: #fff;
        }
    }
}

.lately {
    padding: $spacing-center;

    .lately-nav {
        background: $bg;

        .item {
            flex: 1;
            text-align: center;
            font-size: 0;
            padding: 15rpx 0;
        }

        .act {
            background: $color-theme-blue;
            color: #fff;
        }

        text {
            font-size: $fs-base + 3;
        }
    }
}

page {
    background: #f2f2f2;
    width: 750upx;
    overflow-x: hidden;
}

.qiun-padding {
    padding: 2%;
    width: 96%;
}

.qiun-wrap {
    display: flex;
    flex-wrap: wrap;
}

.qiun-rows {
    display: flex;
    flex-direction: row !important;
}

.qiun-columns {
    display: flex;
    flex-direction: column !important;
}

.qiun-common-mt {
    margin-top: 10upx;
}

.qiun-bg-white {
    background: #ffffff;
}

.qiun-title-bar {
    width: 96%;
    padding: 10upx 2%;
    flex-wrap: nowrap;
}

.qiun-title-dot-light {
    border-left: 10upx solid #0ea391;
    padding-left: 10upx;
    font-size: 32upx;
    color: #000000;
}

.qiun-charts {
    width: 750upx;
    height: 500upx;
    background-color: #ffffff;
}

.charts {
    width: 750upx;
    height: 500upx;
    background-color: #ffffff;
}
</style>
